<template>
    <div class="power-chart-container">
        <div ref="chartContainer" class="chart-container"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'PowerConsumptionChart',
    data() {
        return {
            chart: null,
            // 模拟数据 - 24小时的电力消耗数据
            timeLabels: [
                '2025-07-01 00:00',
                '2025-07-01 00:00',
                '2025-07-01 00:00',
                '2025-07-01 00:00',
                '2025-07-01 00:00',
                '2025-07-01 00:00',
                '2025-07-01 00:00',
                '2025-07-01 00:00',
                '2025-07-01 00:00',
                '2025-07-01 00:00',
                '2025-07-01 00:00',
                '2025-07-01 00:00',
                '2025-07-01 00:00',
                '2025-07-01 00:00',
                '2025-07-01 00:00',
                '2025-07-01 00:00',
                '2025-07-01 00:00',
                '2025-07-01 00:00',
                '2025-07-01 00:00',
                '2025-07-01 00:00',
                '2025-07-01 00:00',
                '2025-07-01 00:00',
                '2025-07-01 00:00',
                '2025-07-01 00:00',
            ],
            // 当前耗电数据 (kWh)
            currentData: [120000, 115000, 118000, 112000, 108000, 105000, 82000, 78000, 85000, 88000, 92000, 95000, 88000, 92000, 85000, 88000, 75000, 78000, 82000, 85000, 78000, 75000, 72000, 70000],
            // 去年同期数据 (kWh)
            lastYearData: [45000, 47000, 46000, 49000, 48000, 47000, 50000, 52000, 51000, 53000, 52000, 51000, 50000, 49000, 48000, 47000, 50000, 52000, 55000, 57000, 56000, 58000, 57000, 56000],
        };
    },
    mounted() {
        this.$nextTick(() => {
            setTimeout(() => {
                this.initChart();
            }, 500);
        });
        // 监听窗口大小变化
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        if (this.chart) {
            this.chart.dispose();
        }
        window.removeEventListener('resize', this.handleResize);
    },
    methods: {
        initChart() {
            // 初始化图表
            this.chart = echarts.init(this.$refs.chartContainer);
            const option = {
                legend: {
                    show: true,
                    right: 10,
                    data: [
                        { name: '用电量', icon: this.$svgIcon, itemHeight: 2, itemWidth: 44 },
                        { name: '去年同期用电量', icon: this.$svgIcon, itemHeight: 2, itemWidth: 24 },
                        { name: '用电费用', itemWidth: 24 },
                        { name: '去年同期用电费用', itemWidth: 24 },
                    ],
                },
                grid: {
                    left: '30px',
                    right: '10px',
                    top: '60px',
                    bottom: '20px',
                    containLabel: false,
                },
                xAxis: {
                    type: 'category',
                    data: this.timeLabels,
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: '#666',
                        fontSize: 12,
                        interval: 3, // 每4个显示一个标签
                        formatter: (value, index) => {
                            // 只显示特定的时间点
                            const showIndexes = [0, 4, 8, 12, 16, 20, 23];
                            return showIndexes.includes(index) ? value : '';
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#e6e6e6',
                            width: 1,
                            type: 'solid',
                        },
                    },
                },
                yAxis: [
                    {
                        name: '单位：kWh',
                        type: 'value',
                        min: 0,
                        max: 150000,
                        interval: 25000,
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            color: '#666',
                            fontSize: 12,
                            formatter: (value) => {
                                if (value === 0) return '0';
                                return value / 1000 + 'k';
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#e6e6e6',
                                width: 1,
                                type: 'solid',
                            },
                        },
                    },
                    {
                        name: '单位：元',
                        type: 'value',
                        offset: -20,
                        min: 0,
                        max: 150000,
                        interval: 25000,
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            color: '#666',
                            fontSize: 12,
                            formatter: (value) => {
                                if (value === 0) return '0';
                                return value / 1000 + 'k';
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#e6e6e6',
                                width: 1,
                                type: 'solid',
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: '用电量',
                        type: 'line',
                        data: this.currentData,
                        smooth: false,
                        symbol: 'none',
                        lineStyle: {
                            color: '#1EC7FF',
                            width: 2,
                        },
                        itemStyle: {
                            color: '#1EC7FF',
                        },
                    },
                    {
                        name: '去年同期用电量',
                        type: 'line',
                        data: this.lastYearData,
                        smooth: false,
                        symbol: 'none',
                        lineStyle: {
                            color: '#13C998',
                            width: 2,
                        },
                        itemStyle: {
                            color: '#13C998',
                        },
                    },
                    {
                        name: '用电费用',
                        type: 'bar',
                        data: this.currentData,
                        smooth: false,
                        symbol: 'none',
                        lineStyle: {
                            color: '#FFAD1E',
                            width: 2,
                        },
                        itemStyle: {
                            color: '#FFAD1E',
                        },
                    },
                    {
                        name: '去年同期用电费用',
                        type: 'bar',
                        data: this.currentData,
                        smooth: false,
                        symbol: 'none',
                        lineStyle: {
                            color: '#F9744F',
                            width: 2,
                        },
                        itemStyle: {
                            color: '#F9744F',
                        },
                    },
                ],
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    borderColor: 'transparent',
                    textStyle: {
                        color: '#fff',
                        fontSize: 12,
                    },
                    formatter: (params) => {
                        let result = `时间: ${params[0].axisValue}<br/>`;
                        params.forEach((param) => {
                            const value = (param.value / 1000).toFixed(1) + 'k kWh';
                            result += `${param.seriesName}: ${value}<br/>`;
                        });
                        return result;
                    },
                },
            };

            this.chart.setOption(option);
        },
        handleResize() {
            if (this.chart) {
                this.chart.resize();
            }
        },
        // 更新数据的方法
        updateData(currentData, lastYearData) {
            if (currentData) this.currentData = currentData;
            if (lastYearData) this.lastYearData = lastYearData;

            if (this.chart) {
                this.chart.setOption({
                    series: [
                        {
                            data: this.currentData,
                        },
                        {
                            data: this.lastYearData,
                        },
                    ],
                });
            }
        },
    },
};
</script>

<style scoped>
.power-chart-container {
    width: 100%;
    height: 340px;
    background: #fff;
    padding: 16px;
}

.chart-container {
    width: 100%;
    height: 100%;
}
</style>
